<template>
    <van-tab :title="'直采直播'">
        <van-cell-group>
          <van-cell><item-card-mini :goods="goods" /></van-cell>
        </van-cell-group>
        <div v-if="items.length > 0">
            <div class="total_text">一共有 <b class="red">{{items.length}}</b> 条直播记录</div>
            <van-collapse
                v-model="active">
                <van-collapse-item
                    v-for="item in items"
                    :key="item.id"
                    class="interval_bot" icon="clock">
                    <div slot="title" class="flex">
                      <div class="van-cell__title">{{item.displaytime | dateTimeFormat}}</div>
                      <div class="van-cell__value flex_2">{{item.content}}</div>
                    </div>
                    <van-cell v-if="item.type === 1">
                        <img v-for="(img, i) in (item.images.split(','))" :key="i" v-lazy="img" alt="直播图片" width="100%">
                    </van-cell>
                    <van-cell v-else>
                        <video ref="videoPlayer" 
                          :src="item.videourl" 
                          width="100%" 
                          preload="auto" 
                          controls
                          playsinline="true"
                          webkit-playsinline="true"
                          x5-playsinline="true">您的浏览器不支持 video 标签。</video>
                    </van-cell>
                </van-collapse-item>
            </van-collapse>
            <van-pagination 
                v-model="currentPage" 
                :total-items="total" 
                :items-per-page="perPage"
                force-ellipses @change="onPage"/>
        </div>
        <div v-else>
          <van-cell-group>
              <van-cell><div class="text-center">--没有直播记录--</div></van-cell>
          </van-cell-group>
          <item-detail :desc="goods.description" v-if="goods" />
        </div>
    </van-tab>
</template>

<script>
import ItemCardMini from "@/vue/components/item-card-mini/";
import ItemDetail from "@/vue/components/item-detail/";
import {
  Tab,
  Collapse,
  CollapseItem,
  Pagination
} from "vant";

import {
  GOODS_ZHIBO
} from '@/api/goods';

export default {
  name: "tab-live",

  props: {
    goods: Object
  },

  data() {
      return {
        items: [],
        currentPage: 1,
        perPage: 5,
        total: 0,
        active: []
     }
  },

  created() {
    this.onPage(true);
  },

  methods: {
    onPage(init) {
      this.$reqGet(GOODS_ZHIBO, {
        productId: this.goods.id,
        offset: (this.currentPage - 1) * this.perPage,
        limit: this.perPage
      }, {
        hideLoading: true
      }).then(res => {
        const {
          rows,
          total
        } = res.data.data;
        this.items = rows;
        this.total = total;
        this.active = [0];
        if (!init) {
            ++this.currentPage;
        }
      });
    },
  },

  components: {
    [ItemCardMini.name]: ItemCardMini,
    [ItemDetail.name]: ItemDetail,
    [Tab.name]: Tab,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Pagination.name]: Pagination,
  }
} 
</script>

<style lang="scss" scoped>
.total_text {
    background-color: #18c852;
    color: #fff; 
    margin-top: 10px;
    padding: 10px;
}
</style>
